<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件基础</title>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/animate.css">
    <style>
        td {
            border: 1px solid #ddd;
            margin: 10px;
            padding: 25px;
            background: orchid;
            text-align: center;
        }

        ul {
            display: flex;
            list-style: none;
            padding: 0;
        }

        li {
            background: yellowgreen;
            padding: 20px;
        }

        li p {
            margin: 15px;
            padding: 20px;
        }

        .zoom-enter-active {
            animation: zoomInDown 1.2s;
        }

        .zoom-leave-active {
            animation: zoomOutDown 1.2s;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2 ref="one">title == {{ title }}</h2>
        <my-head></my-head>

        <select v-model="cptname">
            <option value="my-table">表格展示</option>
            <option value="my-list">列表展示</option>
        </select>

        <keep-alive>
            <transition name="zoom" mode="out-in">
                <component :is="cptname" :cars="cars"></component>
            </transition>
        </keep-alive>
    </div>
    <template id="mytable">
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>品牌</td>
                    <td>型号</td>
                    <td>颜色</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,key,index) in cars" :key="key">
                    <td>{{index+1}}</td>
                    <td>{{item.brand}}</td>
                    <td>{{item.model}}</td>
                    <td>{{item.color}}</td>
                </tr>
            </tbody>
        </table>
    </template>
    <template id="mylist">
        <ul>
            <li v-for="(item,key,index) in cars" :key="key">
                <p>序号:{{index+1}}</p>
                <p>品牌:{{item.brand}}</p>
                <p>型号:{{item.model}}</p>
                <p>颜色:{{item.color}}</p>
            </li>
        </ul>
    </template>

    <script>
        const bus = new Vue()   // 空折Vue实例对象 事件总线
        Vue.component('my-head', {
            template: '<h2>Head - Head - 自定义头部</h2>'
        })
        var cars = {
            car01: { brand: "Ford", model: "Mustang", color: "red" },
            car02: { brand: "Fiat", model: "500", color: "white" },
            car03: { brand: "Volvo", model: "XC90", color: "black" }
        }
        Vue.component('my-table', {
            template: "#mytable",
            props: ['cars'],
            mounted() {
                console.log('table-mounted');
            },
            destroyed() {
                console.log('table-destroyed');
            },
            activated() {
                console.log('table-activated - 激活');
            },
            deactivated() {
                console.log('table-deactivated - 失活');
            }
        })
        Vue.component('my-list', {
            template: '#mylist',
            props: ['cars'],
            mounted() {
                console.log('list-mounted');
            },
            destroyed() {
                console.log('list-destroyed');
            },
        })

        const vm = new Vue({
            el: "#app",
            data: {
                title: '动态组件切换',
                flag: true,
                cars,
                cptname:'my-table'
            },
            mounted() {
                this.$refs.one.style.color = 'red'
                this.$refs.one.style.fontSize = '20px'
            }
        })
    </script>
    <!-- 
    动态组件
    component 官方组件
    (动态切换组件 )
    is 属性 表示当前显示的组件 组件名称

    keep-alive (记录滑动的高度) 失活的组件将会被缓存！ 下一次失活组件重新激活的时候 会直接调用缓存数据 性能优化

    activated 激活
    deactivated 失活

    transition 过渡组件

    组件切换
    1. v-if
    2. v-show
    3. component
    4. 路由 route (切换组件）
    -->
</body>

</html>